<template>
    <li>
        <label>
			<!-- 
				@change="handleCheck(todo.id)
				点击选择按钮后,接收到传入的id值
			-->
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
            <!-- vue不能检测到单个修改的属性，只能检测到全部修改  可以实现但是不建议 -->
			<!-- <input type="checkbox" v-model="todo.done"> -->



            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
export default {
    name:'MyItem',
	// vc身上的属性   有数据劫持会帮忙实现getter setter
    props:['todo','checkTodo','deleteTodo'],
    methods: {
        handleCheck(id) {
            this.checkTodo(id)
			console.log(id);
        },
        handleDelete(id) {
            if(confirm('确定删除吗？')) {
                this.deleteTodo(id)
            }
        }
    }
}
</script>


<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>